<template>
  <div class="werapp">
    <van-nav-bar title="特色课" @click-left="$router.push('/index')">
      <template #right>
        <van-icon name="search" size="18" @click="$router.push('/search')" />
      </template>
    </van-nav-bar>
    <van-dropdown-menu>
      <van-dropdown-item title="分类">
        <div style="width: 100%; padding: 10px; display: flex">
          <van-button plain type="primary" block @click="change2"
            >重置</van-button
          >&emsp;
          <van-button type="danger" block>确定</van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item v-model="value2" title="排序">
        <van-cell
          :class="{ active: nullId == item.id }"
          v-for="item in option2"
          :key="item.id"
          center
          :title="item.title"
          @click="change(item)"
        >
        </van-cell>
      </van-dropdown-item>
      <van-dropdown-item v-model="value3" title="筛选">
        <div style="width: 100%; padding: 10px; display: flex; flex-wrap: wrap">
          <!-- <van-button type="prim" ></van-button> -->
          <van-button
            color="#7232dd"
            :class="{ active1: nullId1 == item.id }"
            block
            plain
            v-for="item in option3"
            :key="item.id"
            style="width: 20%; margin: 10px"
            @click="change1(item)"
            >{{ item.title }}</van-button
          >
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <Loading v-if="list == ''" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="text"
          v-for="(item, index) in list.list"
          :key="index"
          @click="jusp(item)"
        >
          <div class="text-item">
            <h1>{{ item.title }}</h1>
            <p>{{ item.start_play_date }} | 共{{ item.sales_num }}课时</p>
            <div class="text-img">
              <img :src="item.teachers_list[0].teacher_avatar" alt="" />
              <p>{{ item.teachers_list[0].teacher_name }}</p>
            </div>
            <div class="num">
              <p>{{ item.browse_num }}人已报名</p>
              <span class="status" v-if="item.price == 0">免费</span>
              <span class="status" v-else>{{ item.price }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { courseBasis, courseBasissx } from "../request/http";
import Loading from "./commponts/loading.vue";
export default {
  data() {
    return {
      list: [],
      count: 0,
      loading: false,
      finished: true,
      refreshing: false,
      params: {
        page: 1,
        order_by: 0,
        course_type: 0,
        classify_id: 0,
        limit: 5,
      },
      value1: 1,
      value2: null,
      value3: null,
      option2: [
        {
          title: "综合排序",
          act: true,
          id: 0,
        },
        {
          title: "最新",
          act: false,
          id: 1,
        },
        {
          title: "最热",
          act: false,
          id: 2,
        },
        {
          title: "价格从低到高",
          act: false,
          id: 3,
        },
        {
          title: "价格从高到低",
          act: false,
          id: 4,
        },
      ],
      option3: [
        {
          title: "全部",
          isActive: true,
          id: 0,
        },
        {
          title: "大班课",
          isActive: false,
          id: 2,
        },
        {
          title: "小班课",
          isActive: false,
          id: 3,
        },
        {
          title: "公开课",
          isActive: false,
          id: 4,
        },
        {
          title: "视频课",
          isActive: false,
          id: 5,
        },
        {
          title: "面授课",
          isActive: false,
          id: 6,
        },
        {
          title: "音频课",
          isActive: false,
          id: 8,
        },
        {
          title: "系统课",
          isActive: false,
          id: 9,
        },
        {
          title: "图文课",
          isActive: false,
          id: 10,
        },
        {
          title: "会员课",
          isActive: false,
          id: 1,
        },
      ],
      nullId: "",
      nullId1: "",
    };
  },
  methods: {
    onLoad() {
      let page = ++this.params.page;
      console.log(page);
      courseBasis({ page: page, limit: this.params.limit }).then((res) => {
        console.log(res);
        this.list = res.data;
        const { current_page, last_page, list } = res.data;
        console.log(current_page, last_page, list);
        if (list.length == 0 && this.page != 1) {
          debugger;
          this.finished = true;
          this.onFinished && this.onFinished();
          return;
        }
        // console.log(this.list.last_page);
        this.list.last_page = last_page;
        this.list.current_page = current_page;
        this.list.list = [...this.list.list, ...res.data.list];
        console.log(this.list.list);
        this.finished = true;
      });
      this.finished = false;
    },
    onRefresh() {
      this.params.page = 1;
      courseBasis({ page: this.params.page, limit: this.params.limit }).then(
        (res) => {
          console.log(res);
          this.list = res.data;
          this.refreshing = false;
        }
      );
    },
    change2() {
      courseBasis({ page: this.params.page, limit: this.params.limit }).then(
        (res) => {
          console.log(res);
          this.list = res.data;
          this.finished = false;
        }
      );
    },
    change(item) {
      this.nullId = item.id;
      this.params = {
        page: 1,
        limit: 10,
      };
      this.nullId1 = item.id;
      this.params.order_by = item.id;
      console.log(this.params);
      courseBasissx(this.params).then((res) => {
        console.log(res);
        this.list = res.data;
        this.list.current_page = res.current_page;
      });
    },
    change1(item) {
      console.log(item);
      this.params = {
        page: 1,
        limit: 10,
      };
      this.nullId1 = item.id;
      this.params.course_type = item.id;
      console.log(this.params);
      courseBasissx(this.params).then((res) => {
        console.log(res);
        this.list = res.data;
        this.list.current_page = res.current_page;
      });
    },
    jusp(item) {
      this.$router.push({
        path: "/courceDetail",
        query: { id: item.id },
      });
    },
  },
  created() {
    courseBasis({ page: this.params.page, limit: this.params.limit }).then(
      (res) => {
        console.log(res);
        this.list = res.data;
        this.finished = false;
      }
    );
  },
  components: { Loading },
};
</script>

<style lang="scss" scoped>
.werapp {
  background: rgb(242, 243, 245);
}
.text {
  margin: 0 20px;
  padding: 10px;
  margin-bottom: 20px;
  background: #fff;
  .text-item {
    // background: white;/
    .text-img {
      display: flex;
      img {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 100%;
        margin-right: 0.267rem;
      }
    }
    .num {
      display: flex;
      justify-content: space-between;

      .status {
        color: #44a426;
        font-size: 0.427rem;
      }
    }
  }
}
.active {
  color: orange;
}
.active1 {
  background: #ebeefe !important;
  color: #eb6100 !important;
}
</style>